Confirm?

Are you sure you want to proceed?
S
Seyyed Reza Ghomi Behbahani

User Analytics Dashboard

Clone & Customize via AI

Tailwind Analytics Dashboard presents compact analytics cards with progress bars and counts. Uses Blazor data binding and Tailwind utility classes to create a responsive grid layout.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Three analytics cards: Visits by Device, Operating System, and Browser. - Progress-bar style indicators per category with numeric counts. - Responsive grid layout using Tailwind utility classes. - Small visual hover state via scoped CSS (::deep) and Font Awesome icons in headings. ## Key components - Razor markup with @foreach loops and inline style binding for widths. - AnalyticsItemModel record used as the data model. - @code block containing sample lists and GetPercentage method. - Tailwind utility classes (grid, flex, spacing, text, bg) and a component-scoped CSS file. ## How it works - Static sample data lives in private List<AnalyticsItemModel> fields. - GetPercentage(int value, int total) computes a rounded percent; LINQ Sum(...) provides totals. - Each item renders a label, count, and a div with style="width: ...%" that acts as a progress bar. - Hover effects are applied via AnalyticsDashboard.razor.css using ::deep selectors to tweak text color. ## Styling - Tailwind classes implement spacing, typography, rounded cards, shadows and a responsive grid (grid-cols-1 md:grid-cols-2 lg:grid-cols-3). - Scoped CSS adjusts hover color transitions; transitions on bar fills use Tailwind utility classes plus inline styles. - Font Awesome icon classes appear in headings (requires the consuming app to include the icon font). ## Reuse steps 1. Ensure Tailwind is configured in the host project and Tailwind CSS is included in the layout. 2. Add AnalyticsDashboard.razor, AnalyticsDashboard.razor.css and AnalyticsItemModel.cs to the Blazor project. 3. Provide Font Awesome or replace icons with SVG/other icons. 4. Replace the sample lists with a data service or inject a scoped service that returns real analytics data. 5. Wire server API calls or SignalR updates to populate lists and trigger StateHasChanged for live updates. ## Limitations & next steps - This is a single front-end page with static sample data; back-end services, authentication and telemetry wiring are required for production data. - No charting library is included; consider adding chart components for richer visualizations. - Accessibility improvements (ARIA labels for progress bars) and keyboard focus states are not implemented. - Add paging/filtering or drill-down interactions and unit tests for the GetPercentage logic when integrating dynamic data.